import React, { useRef, useEffect } from "react";

export default function Line() {
  const lineRef = useRef<HTMLCanvasElement>(null);

  /** 设置线条 */
  const setLine = (ctx: CanvasRenderingContext2D) => {
    // 开启一个独立的绘制路径
    ctx.beginPath();
    ctx.moveTo(20, 20); // 起点
    ctx.lineTo(200, 20); // 终点
    ctx.lineTo(100, 80);
    ctx.lineWidth = 5;
    ctx.strokeStyle = "red";
    ctx.lineJoin = "round"; // 拐点类型
    ctx.lineCap = "round"; // 结束端点样式
    ctx.stroke();
  };
  

  // 绘制矩形，三角形
  const setJuSan = (ctx: CanvasRenderingContext2D, type: boolean = true, stroke: boolean = true) => {
    // 开启一个独立的绘制路径
    ctx.beginPath();
    if(!type) {
      if(stroke) {
        ctx.strokeStyle = 'green'
        ctx.strokeRect(340, 20, 50, 50)
        return;
      } else {
        ctx.rect(420, 20, 50, 50)
        ctx.strokeStyle = 'red'
        ctx.fillStyle = 'gray'
        ctx.fill()
      }
    }
    ctx.moveTo(220, 20)
    ctx.lineTo(320, 20)
    ctx.lineTo(320, 80)
    ctx.lineTo(220, 80)
    ctx.closePath()
    ctx.strokeStyle = 'blue'
    ctx.stroke()
  }


  // 绘制圆弧
  const setArc = (ctx: CanvasRenderingContext2D, x?: number,y?: number, anticlockwiseType: boolean = false) => {
    // context.arc(
    //   x: , 
    //   y: , 
    //   r: , 
    //   startAngle: 起始弧度 (Math.PI / 180)*角度, 
    //   endAndle: 中止弧度 (Math.PI / 180)*角度, 
    //   anticlockwise: 绘制方向，默认是false顺时针绘制, false: 顺时针 true: 逆时针
    // )
    ctx.beginPath()
    ctx.arc(x||120, y||150, 60, Math.PI/180*0, Math.PI/180*90, anticlockwiseType)
    ctx.strokeStyle = 'gray'
    ctx.stroke()
  }



  // 绘制椭圆
  const setEllipse = (ctx: CanvasRenderingContext2D, ) => {
    // context.ellipse(
    //   x, y: 圆心, 
    //   radiusX: 水平半径, 
    //   radiusY: 垂直半径, 
    //   rotation: 旋转度数, 
    //   startAngle: 起始弧度 (Math.PI / 180)*角度, 
    //   endAngle: 中止弧度 (Math.PI / 180)*角度, 
    //   anticlockwise: 绘制方向，默认是false顺时针绘制, false: 顺时针 true: 逆时针
    // )
    ctx.beginPath()
    ctx.ellipse(400, 150, 60, 20, Math.PI/180*10, 0, Math.PI*2)
    ctx.stroke()
  }


  // 绘制文本
  const setText = (ctx: CanvasRenderingContext2D, text?: string) => {
    ctx.beginPath()
    ctx.font = '20px 宋体' // 设置字体样式 （大小，字体）
    ctx.textAlign = 'left' // 设置字体对齐方式，对齐方式是现对于设置的 x轴 来设置的
    ctx.fillText('我是绘制的文字', 50, 250, 150)
  }


  // 设置图片
  const setImg = (ctx: CanvasRenderingContext2D) => {
    ctx.beginPath()
    const imgPath = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664876308&t=402ec0c3a43fab94b66d55691baee43d"
    const img = new Image()
    img.src = imgPath
    img.onload = () => {
      ctx.drawImage(img, 20, 270, 192, 108)
    }
  }



  useEffect(() => {
    const context = lineRef.current?.getContext("2d");
    if (!context) return;
    // 线条
    setLine(context)
    // 矩形，三角形
    setJuSan(context)
    setJuSan(context, false)
    setJuSan(context, false, false)
    // 圆弧
    setArc(context)
    setArc(context, 250, 150, true)
    // 椭圆
    setEllipse(context)
    // 文字
    setText(context)
    // 图片
    setImg(context)
  }, []);

  return (
    <canvas
      ref={lineRef}
      width="500"
      height="600"
      style={{ border: "1px solid" }}
    ></canvas>
  );
}
